<template>
  <div class="head">
    <span class="back" @click="router.push('/add')">&lt;</span
    ><span class="title">发布</span>
  </div>
  <div class="main">
    <div>
      <van-cell-group inset>
        <van-field
          v-model="username"
          required
          label="商品名称"
          placeholder="请输入商品标题"
          input-align="right"
        />
        <van-field
          v-model="phone"
          required
          label="原价"
          placeholder="请输入商品原价"
          input-align="right"
        />
        <van-field
          v-model="phone"
          label="优惠价"
          placeholder="请输入商品优惠价"
          input-align="right"
        />
        <p
          style="
            font-size: 0.35rem;
            color: rgb(207, 19, 34);
            margin-left: 0.22rem;
          "
        >
          提示:如果设置了套餐,优惠价建议填写套餐中最低的价格
        </p>
        <van-field
          v-model="phone"
          required
          label="优惠形式"
          placeholder="长期优惠"
          input-align="right"
        />
        <div>
          <p>效果图:</p>
          <van-uploader
            v-model="fileList"
            multiple
            :max-count="9"
            :after-read="handleUpload"
            @click="openWorker"
          />
        </div>
        <van-field
          v-model="phone"
          required
          label="商品库存"
          placeholder="请输入商品库存"
          input-align="right"
        />
        <p
          style="
            font-size: 0.36rem;
            color: rgb(207, 19, 34);
            margin-left: 0.35rem;
          "
        >
          提示:如果是点卡交易类,库存值无需填写,将自动读取
        </p>
        <van-field
          v-model="phone"
          required
          label="发货形式"
          placeholder="自动发货"
          input-align="right"
          right-icon="warning-o"
        />
        <van-field
          v-model="message"
          rows="2"
          required
          autosize
          label="商品描述"
          type="textarea"
          input-align="right"
          placeholder="请输入商品描述"
          show-word-limit
        />
      </van-cell-group>
    </div>
  </div>
  <div class="foot">
            <button @click="router.push('/index/shou')">下一步</button>
        </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import axios from "axios";
// import {addEventListener} from '../../workers/Worker'
const openWorker = ()=>{
  const worker = new Worker(new URL('../../workers/Worker', import.meta.url))
  worker.postMessage('开启线程')
  worker.onmessage = e =>{
    console.log(e.data);
    setTimeout(()=>{
      worker.postMessage('线程关闭')
      worker.terminate()
    },1000)
  }
}
const router = useRouter();
const fileList = ref([]);
async function handleUpload(file) {
  // 创建FormData对象用于上传
  const formData = new FormData();
  formData.append("image", file.file);

  try {
    // 发起POST请求上传图片
    const response = await axios.post("/your/upload/api", formData, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    });

    if (response.status === 200 && response.data.success) {
      // 从服务器响应中获取图片URL
      const imageUrl = response.data.data.url;
      console.log("图片上传成功,URL:", imageUrl);

      // 这里你可以进一步处理imageUrl，比如存入状态变量供其他部分使用
    } else {
      console.error("图片上传失败:", response.data.message);
    }
  } catch (error) {
    console.error("图片上传时发生错误:", error);
  }
}
</script>

<style scoped>
.head {
  height: 50px;
  width: 100%;
  background-color: rgb(207, 19, 34);
  color: white;
  line-height: 50px;
  /* text-align: center; */
  font-size: 22px;
}
.head .back {
  margin-left: 5%;
  cursor: pointer;
}
.head .title {
  margin-left: 35%;
}
.main {
  width: 100%;
  background-color: white;
}
.foot{
    margin-top: 10px;
}
.foot button{
    background-color: rgb(207, 19, 34);
    color: white;
    width: 90%;
    margin-left: 5%;
    border: 1px solid rgb(207, 19, 34);
    border-radius: 8px;
    height: 60px;
    font-size: 22px;
}
</style>